<template>
  <maincontainer>
    <mycard>
      <Searchform ref='formRef' :formList='formList' :formValue='formValue'>
        <template #action>
          <n-form-item>
            <n-button @click='handleSearch'>查询</n-button>
            <n-button @click='handleResetForm'>重置</n-button>
            <n-button @click='handleCreate'>新建</n-button>
          </n-form-item>
        </template>
      </Searchform>
    </mycard>
    <mycard class="flex-1 h-full">
      <flextable :column="column" :tabledata="tableData" :loading='loading'></flextable>
    </mycard>
    <mycard class="w-full h-8 juzhong1">
      <fenye :total="total" @change="gettabledatafunc" ref="fenyeref" class="juzhong1"></fenye>
    </mycard>
    <Edit ref="editref" @close='refreshdelete'/>
  </maincontainer>
</template>

<script setup name="Transferapply" lang="ts">
import {useRoute} from 'vue-router'
import Edit from "./modal.vue"
import {inject, ref} from "vue"
import {useListIndex} from '../../../hooks/useEdit'
import {useColumns} from '../../../hooks/useColumns'

const route = useRoute()
const parentoptions = ref([]) // 上级部门列表

const {
  formRef, fenyeref, editref, formValue, tableData, total, handleSearch,
  handleResetForm, handleView,  handleCreate, refreshdelete,
  http, message,loading,
} = useListIndex()
// 查询表单数据
const formList=ref([
  {
    label: '姓名',
    key: 'name',
    type: 'input',
    rules: [],
  },
  {},
  {},
  {
    slot:"action",
  },
  ])

// 点击删除
let delDialog: Function = inject("delDialog")
const handleDelete = (data: any) => {
  delDialog(refreshdelete, http.departdelete, data.id, data.name)
}
const handleEdit=(data:any)=>{
  const newdata= {...data}
  newdata.parent = data.parent ? data.parent.id : null
  editref.value.init("edit",newdata)
}

const {index, createdTime, changeTime, view, edit, del} = useColumns(handleView, handleEdit, handleDelete)
const column = ref([
  index,
  {title: "部门名称", key: "name", show: true},
  {
    title: "上级部门", key: "parent", show: true, render: (rowData: any,) => {
      return rowData["parent"] ? rowData["parent"].name : ""
    }
  },
  {title: "备注", key: "desc", show: true},
  createdTime,
  changeTime,
  view, edit, del,
])

// 向后台获取数据
const gettabledatafunc = () => {
  const config = {...formValue.value,page:fenyeref.value.page,pageSize:fenyeref.value.pageSize}
  http.departlist(config).then(res => {
    if (res.data.code === 0) {
      tableData.value = res.data.items;
    } else {
      message.error(res.data.msg || "获取数据失败")
    }
  })
}

// 获取菜单的属性数据
const gettreeDatefunc = () => {
  http.departtree({}).then(res => {
    if (res.data.code === 0) {
      parentoptions.value = res.data.items
    } else {
      message.error(res.data.msg || "获取全部部门失败")
    }
  })
}

// 点击查看成员
const handleViewWorker = (data: any) => {
}


/******************************************************************************
 * 将这个组件注册到顶级组件中，方便调用刷新
 *****************************************************************************/
const zhucefunc:Function|undefined = inject("zhuceshuaxinfunc")
// 初始化函数
const init = () => {
  fenyeref.value && fenyeref.value.changeoption({page:1})
  gettreeDatefunc()
}

// 初始化区域
init()
zhucefunc && zhucefunc({[route.name!.toString()]:init})
</script>


<style scoped>
</style>
